<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
  
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.1</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script type="text/javascript" th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <script type="text/javascript" th:src="@{/js/cookie.js}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script th:src="@{https://cdn.staticfile.org/html5shiv/r29/html5.min.js}"></script>
    <script th:src="@{https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js}"></script>
  <![endif]-->
  </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so layui-form-pane" type="post">
          <input class="layui-input" placeholder="导航栏名" name="bigItems" id="bigItems" onkeyup="this.value=this.value.replace(/\s+/g,'')">
          <button class="layui-btn"  lay-submit="" lay-filter="add"><i class="layui-icon"></i>增加</button>&nbsp;&nbsp;<span id="BigInfo"></span>
        </form>
      </div>
      <xblock>
        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
      </xblock>
      <table class="layui-table layui-form x-admin">
        <thead>
          <tr>
            <th width="20">
              <div class="layui-unselect header layui-form-checkbox big small" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
            </th>
            <th width="70">ID</th>
            <th>栏目名</th>
            <th width="50">排序</th>
            <th width="250">操作</th>
        </thead>
        <tbody class="x-cate" th:each="bigitems:${pageInfo.list}" >
          <tr th:cate-id="${bigitems.bi_id}" fid='0'>
            <td>
              <div class="layui-unselect layui-form-checkbox big"  lay-skin="primary" th:data-id="${bigitems.bi_id}"><i class="layui-icon">&#xe605;</i></div>
            </td>
            <td th:text="${bigitems.bi_id}"></td>
            <td>
              <i class="layui-icon x-show" status='true'>&#xe623;</i><span th:text="${bigitems.bi_name}"></span>
            </td>
            <td><input type="text" name="sort" class="layui-input x-sort" th:id="${bigitems.bi_id}" th:value="${bigitems.sort}" onchange="se(this.id,this.value)"></td>
            <td class="td-manage">
              <button class="layui-btn layui-btn layui-btn-xs"  th:onclick="|x_admin_show('编辑','/toEditBigItems?id=${bigitems.bi_id}',400,200)|" ><i class="layui-icon">&#xe642;</i>编辑</button>
              <button class="layui-btn layui-btn-warm layui-btn-xs"  th:onclick="|x_admin_show('添加子项目','/toAddSmallItems?id=${bigitems.bi_id}',500,300)|" ><i class="layui-icon">&#xe642;</i>添加子栏目</button>
              <button class="layui-btn-danger layui-btn layui-btn-xs"  th:onclick="'javascript:member_del(this,\''+${bigitems.bi_id}+'\')'" href="javascript:;" ><i class="layui-icon">&#xe640;</i>删除</button>
            </td>
          </tr>
          <tr th:if="${smallitems.bis_id} eq ${bigitems.bi_id}" cate-id="a" th:fid="${bigitems.bi_id}" th:each="smallitems:${SmallList}">
            <td>
              <div class="layui-unselect layui-form-checkbox small" lay-skin="primary"  th:data-id="${smallitems.si_id}"><i class="layui-icon">&#xe605;</i></div>
            </td>
            <td th:text="${smallitems.si_id}"></td>
            <td>
              &nbsp;&nbsp;&nbsp;&nbsp;
              ├&nbsp;<span th:text="${smallitems.si_name}"></span>
            </td>
            <td><input type="text" class="layui-input x-sort" name="order" value="1"></td>
            <td class="td-manage">
              <button class="layui-btn layui-btn layui-btn-xs"  th:onclick="|x_admin_show('编辑','/toEditSmallItems?si_id=${smallitems.si_id}&bis_id=${smallitems.bis_id}',400,300)|" ><i class="layui-icon">&#xe642;</i>编辑</button>
              <button class="layui-btn-danger layui-btn layui-btn-xs"  th:onclick="'javascript:member_del1(this,\''+${smallitems.si_id}+'\')'" href="javascript:;" ><i class="layui-icon">&#xe640;</i>删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="page">
        <div>
          <p>当前 <span th:text="${pageInfo.pageNum}"></span> 页,总 <span th:text="${pageInfo.pages}"></span> 页,共 <span th:text="${pageInfo.total}"></span> 条记录</p>
          <a th:href="@{/nav-list}">首页</a>
          <a th:href="@{/nav-list(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">上一页</a>
          <a th:href="@{/nav-list(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a>
          <a th:href="@{/nav-list(pageNum=${pageInfo.pages})}">尾页</a>
        </div>
      </div>
    </div>
    <script>
      function se(id,value) {
        var data = {"bi_id": id, "sort": value};
        console.log(data);
        $.post({
          url: '/updateSort',
          data: data,
          dataType: 'text',
          success: function (data) {
            if (data.toString() == 'ok') {
              window.location.reload();
            }
          }
        });
      }
      layui.use(['form','layer'], function(){
        $ = layui.jquery;
        var form = layui.form,layer = layui.layer;
        form.on('submit(add)',function (data) {
          var data={"bi_name":$("#bigItems").val()}
          if (data.bi_name == '') {
            $('#BigInfo').css("color","red").html("不能为空");
            return false;
          }else {
            $.post({
              url: '/addBigItems',
              data: data,
              dataType: 'text',
              success: function (data) {
                if (data.toString() == 'ok') {
                  layer.msg("增加成功", {icon: 6, time: 500}, function () {
                    // 可以对窗口进行刷新
                    window.location.reload();
                  });
                } else {
                  $('#BigInfo').css("color", "red").html(data);
                }
              },
              error: function (data) {
                layer.msg('增加失败!', {icon: 2, time: 1000});
              }
            });
            return false;
          }
        })
      });
      /*用户-删除*/
      function member_del(obj,id){
          layer.confirm('确认要删除吗？',function(index){
              //发异步删除数据
            $.post({
              url: '/delBigItems',
              data: "id=" + id,
              dataType: 'text',
              success: function (data) {
                $(obj).parents("tr").remove();
                layer.msg('已删除!', {icon: 1, time: 1000});
                // 可以对窗口进行刷新
                window.location.reload();
              },
              error: function (data) {
                layer.msg('删除失败!', {icon: 2, time: 1000});
              }
            });
          });
      }
      /*用户-删除*/
      function member_del1(obj,id){
        layer.confirm('确认要删除吗？',function(index){
          //发异步删除数据
          $.post({
            url: '/delSmallItems',
            data: "id=" + id,
            dataType: 'text',
            success: function (data) {
              if (data.toString()=='ok') {
                $(obj).parents("tr").remove();
                layer.msg('已删除!', {icon: 1, time: 1000});
                // 可以对窗口进行刷新
                window.location.reload();
              }
            },
            error: function (data) {
              layer.msg('删除失败!', {icon: 2, time: 1000});
            }
          });
        });
      }
      function delAll (argument) {
        var data = tableCheck1.getData();
        if (data.length==0) {
          layer.msg('没有选中', {icon: 2});
        }else {
          layer.confirm('确认要删除吗？', function (index) {
            //捉到所有被选中的，发异步进行删除
            for (var dataKey in data) {
              if (dataKey == 'a') {
                $.post({
                  traditional: true,
                  url: '/delSelectBig',
                  data: "data=" + data[dataKey],
                  dataType: 'text',
                });
              }
              if (dataKey == 'b') {
                $.post({
                  traditional: true,
                  url: '/delSelectSmall',
                  data: "data=" + data[dataKey],
                  dataType: 'text',
                });
              }
            }
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
          });
        }
      }
    </script>
    <script>var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();</script>
  </body>
</html>